<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="横向滑动焦点图" />
<meta name="description" content="带标题横向滑动焦点图，兼容IE6" />
<title>魔蝎 - 带标题横向滑动焦点图</title>
<script type="text/javascript" src="http://mxslide.oschina.mopaas.com/mx-slide/mystatics/js/jquery.min.js"></script>
<script type="text/javascript" src="http://mxslide.oschina.mopaas.com/mx-slide/mystatics/js/mx-slide-min.js"></script>
</head>
<body style="padding:15px 30px;">

<h1>带标题横向滑动轮播</h1>
<div style="clear:both; height:20px;"></div>
<!-- mx-slide -->
<link rel="stylesheet" type="text/css" href="mystatics/css/mx-left.css" />
<script type="text/javascript">
mx_slide('#mx-left').mode('left').num(false).start(function(i){
	$('#mx-left .mx-title a').eq(i).fadeIn(0).siblings().stop().fadeOut(0);	//标题切换);
});
</script>
<div id="mx-left">
	<div class="mx-hidden">
	<div class="mx-width">
		<div class="mx-content">
			<a href="#"><img src="mystatics/images/0.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/1.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/2.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/3.jpg" title="" alt="" /></a>
			<a href="#"><img src="mystatics/images/4.jpg" title="" alt="" /></a>
		</div>
	</div>
	</div>
	<div class="mx-bg"></div>
	<div class="mx-title">
			<a href="#" title="焦点测试篇之渐变篇一">焦点测试篇之渐变篇一</a>
			<a href="#" title="焦点测试篇之渐变篇二">焦点测试篇之渐变篇二</a>
			<a href="#" title="焦点测试篇之渐变篇三">焦点测试篇之渐变篇三</a>
			<a href="#" title="焦点测试篇之渐变篇四">焦点测试篇之渐变篇四</a>
			<a href="#" title="焦点测试篇之渐变篇五">焦点测试篇之渐变篇五</a>
	</div>
	<div class="mx-change"></div>
	<div class="mx-key">
		<a href="javascript:;" class="mx-key-back"><</a>
		<a href="javascript:;" class="mx-key-next">></a>
	</div>
</div>
<!-- end -->
<div style="clear:both; height:20px;"></div>
<div style="width:1178px; padding:10px; border:1px solid #d0d0d0; background:#f0f0f0; line-height:26px">
mx_slide('#mx-left').mode('left').num(false).start(function(i){<br/>
　　$('#mx-left .mx-title a').eq(i).fadeIn(0).siblings().stop().fadeOut(0);	//标题切换<br/>
});
</div>
<div style="clear:both; height:50px;"></div>
<div>下载地址：<a href="mx_slide.zip" title="点击下载" target="_blank">mx_slide.zip</a></div>
<div style="clear:both; height:10px;"></div>
<p>QQ群：Web前端JavaScript <a target="_blank" href="http://shang.qq.com/wpa/qunwpa?idkey=005e26fc32422224a44a0148c6d4f9d2e7f9b0807e58af168c5a678554c18c6e"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="Web前端-JavaScript" title="Web前端-JavaScript"></a> —— 1929 88681</p>
</body>
</html>